<template>
	<view class="order">
		<view class="uniNavBars">
			<radio-group class="head-bar" @change="radioChange">
				<label class="label " :class="{'active' :item.value===current}" v-for="(item, index) in order" :key="item.value">
					<radio :value="item.value" :checked="item.value === current" />
					<view class="name">{{item.name}}</view>
				</label>
			</radio-group>
		</view>

		<view class="order-box">
			<view class="order-item" v-for="item in orderListCom" :key="item.id">
				<view class="backgrond">
					<view class="top">
						<view class="text">
							<text>订单列表:{{ item.orderId }}</text>
						</view>

						<view class="payment" v-if="current != 9">
							<text v-if="item.status == '0'">未付款 </text>
							<text v-else-if="item.status == '1'">等待收货</text>

							<text v-else-if="item.status == '2'">已发货</text>
							<text v-else-if="item.status == '3'">已收货</text>

						</view>


						<!-- 申请退款 -->
						<view class="payment" v-if="current==9" style="color: #007AFF;">
							<text v-if="item.process  == '0'">等待处理</text>
							<text v-else-if="item.process  == '1'">确认退货,等待收货</text>

							<text v-else-if="item.process  == '2'">确认收货,已退款</text>
							<text v-else-if="item.process  == '9'">拒绝退货</text>

						</view>
					</view>

					<navigator :url="'../../kind/detail/detail?productId='+sku.product_id" class="commodity" v-for="(sku,index) in item.subList" :key="index">

						<view class="imgs">
							<image style="width: 160rpx;height: 160rpx;" :src="sku.cover_img" mode=""></image>


							<view class="content">
								<view class="name">
									<view class="gname">
										{{ sku.gname }}
									</view>


									<view class="price"> ￥{{ sku.price }}</view>
								</view>
								<view class="sku_code">

									<view class="sku_code-item">
										编号: {{ sku.sku_code }}
									</view>

									<view class="count"> *{{ sku.count }}</view>
								</view>


								<view class="color_texts">
									规格: {{ sku.color_text }}
								</view>

							</view>

						</view>
						<view class="price-count" v-if="item.status == '2'">
							<view style="color: #007AFF;">
								<view v-if="!sku.backId" class="count" @click="goSales(item.orderId,sku)">退货</view>
								<view v-else style="color: #4CD964;">退货中</view>
							</view>

							<view style="padding-left: 20rpx;">
								合计:￥{{ item.totalPrice }}
							</view>

						</view>
					</navigator>



					<view class="cancel-payment" v-if="item.status == '0'">
						<view class="cancel">

							<p class="css" @click="gotel(item.orderId)">取消支付</p>
						</view>
						<view class="payment" @click="goAdd(item.orderId,item.totalPrice)">
							<p class="css">支付</p>
						</view>


					</view>
					<view class="cancel-payment" v-if="item.status == '2'">

						<view class="payment" style="margin-left: 140rpx;">
							<p class="css" @click="goaPyment(item.orderId)">确认收货</p>
						</view>


					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	// import orderApi from "@/api/order/index.js"
	import orderApi from "@/api/order/index.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue" 
	import {
		isLogin,
		checkLogin
	} from "@/utils/common.js"
	export default {
		components: {
					uniLoadMore 
				},
		data() {
			return {
				current: '0',
				order: [{
						name: "未付款",
						value: "0"
					},
					{
						name: "已付款",
						value: "1"
					},
					{
						name: "已发货",
						value: "2"
					},
					{
						name: "已收货",
						value: "3"
					},
					{
						name: "申请退款",
						value: "9"
					}
				],
				orderList: [],
				
				orderBackList: [],
			
			
			}
		},
		
		onLoad(option) {

			this.getOrderList()
			this.getorderBackList()
			// 下拉刷新   
			this.initData()



			this.current = option.type

			// 判断denglu
			if (isLogin()) {
				// this.getOrderList();
				// 退单列表
				// this.getOrderBackList();
			} else {
				uni.showModal({
					title: "未登录",
					content: "您未登录, 需要登录后才能查看",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							});
						}
					}
				})
			}
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.initData()
			setTimeout(function() {

				uni.stopPullDownRefresh();
			}, 1000);
		},
			 
				
		methods: {

			// 下拉刷新
			initData() {
				
				this.getOrderList()
			},


			// 订单列表
			getOrderList() {
				
			
			
				orderApi.orderList({
						userId: this.$store.getters.user.id,
					
					})

					.then(res => {
						this.orderList = res.data.list
							
						// console.log(this.orderList)
					})
			},
			//退货列表
			getorderBackList() {
				orderApi.orderBackList({
					userId: this.$store.getters.user.id
				}).then(res => {
					// this.orderBackList = res.data	
					var backList = res.data;
					for (var i = 0; i < backList.length; i++) {
						var item = backList[i];
						this.orderBackList.push({
							orderId: item.orderId,
							process: item.process,
							subList: [{
								...item
							}]
						})
					}
				})
			},

			//取消订单
			gotel(orderId) {
				orderApi.delOrderPre({
					orderId: orderId

				}).then(res => {
					if (res.code == 'S') {
						this.getOrderList()
					} else {
						uni.showToast({
							title: '失败!',
							duration: 1000
						})
					}

				})
			},
			// 未付款支付
			goAdd(orderId, price) {
				uni.navigateTo({
					url: '/pages/mine/order/payment/payment?price=' + price + '&orderId=' + orderId

				});
			},
			// 确定收货
			goaPyment(orderId) {
				uni.showLoading({
					title: '已收货',
					duration: 500
				});
				orderApi.allDone({

					id: orderId,

				}).then(res => {

					if (res.code == "S") {
						setTimeout(() => {
							this.getOrderList()
							uni.hideLoading();
						}, 500)

					} else {
						uni.hideToast();
						uni.showLoading({
							title: '提交失败'
						});

					}
				})
			},
			// 退货backOrder
			goSales(orderId, sku) {

				this.$store.commit('order/ADD_TEMP_ORDER_BACK', sku);

				uni.navigateTo({
					url: "./sales/sales"

				});


			},
			radioChange(e) {
				this.current = e.detail.value;
				// console.log('111',e)
				// window.location.hash = '#/pages/mine/order/order?type=' + this.current
			}
		},
		computed: {
			orderListCom() {
				if (this.current == 9) {
					return this.orderBackList;
				}
				return this.orderList.filter(item => item.status == this.current);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		.uniNavBars {
			width: 100%;
			height: 100rpx;
			background: #354E44;
			/*  #ifdef  H5  */
			margin-top: 70rpx;
			/*  #endif  */

			position: fixed;
			left: 0;
			top: 0;
			z-index: 6;

			.head-bar {}

			.label {
				float: left;
				margin-left: 40rpx;

				radio {
					display: none;
				}

				&.active {

					border-bottom: 3rpx solid #fff;

					border-radius: 10rpx 10rpx 0 0;

				}

				.name {
					line-height: 90rpx;
					font-family: PingFangSC-Regular;
					font-size: 30rpx;
					color: #FFFFFF;
					letter-spacing: 2.14rpx;
				}

			}

		}

		.order-box {
			padding-top: 130rpx;

			.order-item {
				text-align: center;

				.backgrond {
					width: 672rpx;
					// height: 334rpx;
					margin: 20rpx auto;
					background: #FFFFFF;
					box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
					border-radius: 24rpx;
					border-radius: 24rpx;
					padding-bottom: 30rpx;

					.top {
						display: flex;
						padding-top: 22rpx;

						justify-content: space-around;

						.text {
							// margin-left: 36rpx;

							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #3E3E3E;
							letter-spacing: 1.71rpx;
						}

						.payment {


							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #3E3E3E;
							letter-spacing: 1.71rpx;
						}
					}

					.commodity {

						margin-left: 36rpx;

						.imgs {
							display: flex;
							margin-top: 29rpx;

							.content {
								padding-top: 29rpx;
								padding-left: 28rpx;

								.name {
									display: flex;
									padding-bottom: 10rpx;

									.gname {

										font-family: PingFangSC-Semibold;
										font-size: 26rpx;
										color: #3E3E3E;
										letter-spacing: 1.86rpx;
									}

									.price {

										font-family: PingFangSC-Semibold;
										font-size: 26rpx;
										color: #3E3E3E;
										letter-spacing: 1.86rpx;
										position: absolute;
										right: 97rpx;
									}
								}

								.sku_code {
									display: flex;
									font-family: PingFangSC-Regular;
									font-size: 22rpx;
									color: #8D8D8D;
									letter-spacing: 1.57rpx;

									.sku_code-item {}

									.count {
										position: absolute;
										right: 97rpx;
									}
								}

								.color_texts {
									float: left;
									font-family: PingFangSC-Regular;
									font-size: 22rpx;
									color: #8D8D8D;
									letter-spacing: 1.57rpx;
								}
							}


						}

					}

					.price-count {

						padding-left: 394rpx;
						display: flex;

						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;

					}

					.cancel-payment {
						margin-left: 344rpx;
						display: flex;
						margin-top: 17rpx;

						.cancel {
							width: 136rpx;
							height: 50rpx;
							text-align: center;
							opacity: 0.25;
							border: 2rpx solid #6C6C6C;
							border-radius: 10rpx;
							border-radius: 10rpx;

							.css {
								line-height: 50rpx;
								font-size: 26rpx;
							}
						}

						.payment {

							width: 124rpx;
							height: 50rpx;
							margin-left: 32rpx;
							text-align: center;
							opacity: 0.76;
							border: 2rpx solid #2D4F43;
							border-radius: 10rpx;
							border-radius: 10rpx;

							.css {
								line-height: 50rpx;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
